<template>
    <Modal :mask-closable="false" v-model="toolMaintenanceVisible" :title="isAdd ? '新增工具' : '编辑工具'">
        <Form class="formList" ref="toolForm" :model="formItem" :label-width="100" :rules="validateMalfunction">
            <FormItem label="使用工具：" prop="toolName">
                <Input type="text" v-model="formItem.toolName" :placeholder="`${$t('common.inputInfo')}`"
                    class="inputBorder" :maxlength="32"></Input>
            </FormItem>
            <FormItem label="规格型号：" prop="toolModel">
                <Input type="text" v-model="formItem.toolModel" :placeholder="`${$t('common.inputInfo')}`"
                    class="inputBorder" :maxlength="32"></Input>
            </FormItem>
            <FormItem label="品牌：" prop="toolBrand">
                <Input type="text" v-model="formItem.toolBrand" :placeholder="`${$t('common.inputInfo')}`"
                    class="inputBorder" :maxlength="32"></Input>
            </FormItem>
            <FormItem label="数量：" prop="toolNum">
                <InputNumber :min="0" :formatter="value => `${parseInt(value)}`" v-model="formItem.toolNum"
                    :placeholder="`${$t('common.inputInfo')}`" style="width: 100%" class="inputBorder"></InputNumber>
            </FormItem>
            <FormItem label="保养方式：" prop="keepType">
                <Input type="text" v-model="formItem.keepType" :placeholder="`${$t('common.inputInfo')}`"
                    class="inputBorder" :maxlength="32"></Input>
            </FormItem>
        </Form>
        <div slot="footer">
            <Button type="default" @click="handleCancel">{{ $t('common.Cancle') }}</Button>
            <Button type="primary" :loading="loading" @click="handleOk">{{ $t('maintenance.Confirmed') }}</Button>
        </div>
    </Modal>
</template>

<script>
export default {
    name: "toolMaintenanceModal",
    data() {
        return {
            isAdd: false,
            toolMaintenanceVisible: false,
            loading: false,
            formItem: {
                toolName: '',
                toolModel: '',
                toolBrand: '',
                toolNum: null,
                keepType: '',
            },
            validateMalfunction: {
                toolName: [
                    { required: true, message: '请输入使用工具', trigger: 'blur' }
                ],
                toolModel: [
                    { required: true, message: '请输入规格型号', trigger: 'blur' }
                ],
                toolBrand: [
                    { required: true, message: '请输入品牌', trigger: 'blur' }
                ],
                toolNum: [
                    { required: true, type: 'number', message: '请输入数量', trigger: 'blur' }
                ],
                keepType: [
                    { required: true, message: '请输入保养方式', trigger: 'blur' }
                ]
            }
        }
    },
    methods: {
        show(type, record) {
            
            this.toolMaintenanceVisible = true
            if (type === 'add') {
                this.$refs.toolForm.resetFields();
                this.isAdd = true
            } else {
                this.isAdd = false
                this.formItem = {
                    ...record,
                    // toolNum: String(record.toolNum)
                }
            }
        },
        handleOk() {
            let { id, toolBrand, toolModel, toolName, toolNum, keepType } = this.formItem
            this.loading = true
            this.$refs.toolForm.validate((valid) => {
                if (valid) {
                    if (this.isAdd) {
                        let params = {
                            toolBrand,
                            toolModel,
                            toolName,
                            toolNum,
                            keepType
                        }
                        this.axios({
                            method: 'post',
                            url: '/workorder/workorderTool/add',
                            data: params
                        }).then(res => {

                            if (res.code === 200) {
                                this.toolMaintenanceVisible = false
                                this.loading = false
                                this.$Message.success('新增成功！')
                                this.$refs.toolForm.resetFields();
                                this.$emit('refresh')
                            } else {
                                this.toolMaintenanceVisible = false
                                this.loading = false
                                this.$Message.error(res.msg)
                            }
                        })
                    } else {
                        let params = {
                            id,
                            toolBrand,
                            toolModel,
                            toolName,
                            toolNum,
                            keepType
                        }
                        this.axios({
                            method: 'put',
                            url: '/workorder/workorderTool/edit',
                            data: params
                        }).then(res => {

                            if (res.code === 200) {
                                this.toolMaintenanceVisible = false
                                this.loading = false
                                this.$Message.success('编辑成功！')
                                this.$refs.toolForm.resetFields();
                                this.$emit('refresh')
                            } else {
                                this.toolMaintenanceVisible = false
                                this.loading = false
                                this.$Message.error(res.msg)
                            }
                        })
                    }
                } else {
                    this.loading = false
                }
            })
        },
        handleCancel() {
            this.$refs.toolForm.resetFields();
            this.toolMaintenanceVisible = false
        }
    }
}
</script>

<style scoped></style>
